//定义懒加载指令
import {useIntersectionObserver} from "@vueuse/core";

export const LazyLoad = { //app.directive('img-lazy', {...})：在 Vue 应用中注册一个名为 img-lazy 的自定义指令。
  install(app){ //注册插件，在main.js中使用app.use(LazyLoad)
    app.directive('img-lazy', {
      mounted(el, binding) {
        //el: 指令所在元素
        //binding: 指令绑定的数据对象
        //binding.value: 指令的绑定值，即指令的参数
        const { stop } = useIntersectionObserver(
          el,
          ([entry], ) => { //entry 是一个 IntersectionObserverEntry 对象，包含关于目标元素与视口相交状态的信息。
            console.log(entry.isIntersecting)
            if (entry.isIntersecting) {  //entry.isIntersecting为boolean类型，判断图片是否进入可视区域
              el.src = binding.value //图片进入可视区域，将图片地址赋值给src属性
              stop() //每个图片只加载一次，停止监听
            }
          },
        )
      }//判断图片是否进入可视区域useIntersectionObserver：https://vueuse.nodejs.cn/core/useIntersectionObserver/
    })
  }
}
//https://metaso.cn/s/32fDAum
